<template>
    <div class="container">
        <h3>检测机构</h3>
            <el-row style="margin-top:20px;">
                <el-col :span="7">
                    <el-input placeholder="请输入关键词" v-model.trim="searchName" style="width:300px;">
                        <i slot="prefix" class="el-input__icon el-icon-search"></i>
                       
                        <el-button slot="append" @click="handleSearch">搜索</el-button>
                    </el-input>
                </el-col>
                
                <router-link to="detectionMechanism/added" v-if="added"><el-button type="primary" style="float:right; margin-right: 10px;">新增</el-button></router-link>
            </el-row>
            <el-table
                :data="tableData"
                border
                ref="multipleTable"
                header-cell-class-name="table-header"
                style="margin-top:20px;"
            >
                <el-table-column prop="manageName" sortable label="检测机构"></el-table-column>
                <el-table-column prop="userName" sortable label="检测负责人"></el-table-column>
                <el-table-column prop="createTime" sortable label="添加时间"></el-table-column>
				<el-table-column prop="stateful" sortable label="状态"></el-table-column>
                <el-table-column label="操作" width="150" align="center">
                    <template slot-scope="scope">
                        
                        <el-button
                            type="text"
                            style="color: #409EFF;"     
							v-if="edit"
                            @click="handleEdit(scope.$index, scope.row)"
                        >编辑</el-button>
                        <el-button type="text">
                            <el-dropdown style="color: #409EFF; font-size:12px">
                                <span class="el-dropdown-link">
                                    更多
                                </span>
                                <el-dropdown-menu slot="dropdown">
                                   
                                     <el-dropdown-item>
										<el-button
											type="text"
											 v-show="disable"
											v-if="state == scope.row.state"
											@click="disabled(scope.$index, scope.row)"
											style="color: #666"
										>禁用</el-button>
									</el-dropdown-item>
									<el-dropdown-item>
										<el-button
											type="text"
											 v-show="disable"
											v-if="state == scope.row.state?0:1"
											@click="start(scope.$index, scope.row)"
											style="color: #666"
										>启用</el-button>
									</el-dropdown-item>
									
                                    <el-dropdown-item>
                                        <el-button
										v-if="del"
                                            type="text"
                                            style="color:red;"
                                            @click="handleDelete(scope.$index, scope.row)"
                                        >删除</el-button>
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination layout="total, prev, pager, next, jumper" :page-size="pagesize" :current-page.sync="currentPage"  @current-change="handleCurrentChange" :total="total" style="margin-top:20px"></el-pagination>
    
    </div>
</template>

<script>
    import {manage_findByList,manage_delete,manage_update} from '@/request/api'
    import {CodeToText} from 'element-china-area-data'
    export default {
        data() {
            return {
				added:true,
				del:true,
				edit:true,
				disable:true,
				state:0,
                searchName: '',
                tableData: [],
                currentPage:1,
                pagesize:10,
                total:0,
                // added:true,.
                // edit:true,
                // check:true,
                // del:true,
                action:''
            };
        },
        created(){
			var data = JSON.stringify(this.$store.state.jcjg)
			var a = "新增"
			var b = "编辑"
			var c = "禁用"
			var d = "删除"
			if(data.indexOf(a) != -1){
			    this.added = true
			}else{
			    this.added = false
			}
			if(data.indexOf(b) != -1){
			    this.edit = true
			}else{
			    this.edit = false
			}
			
			if(data.indexOf(c) != -1){
			    this.disable = true
			}else{
			    this.disable = false
			}
			if(data.indexOf(d) != -1){
			    this.del = true
			}else{
			    this.del = false
			}
        },
        mounted(){
            this.init()
        },
        methods: {
			disabled(index,row){
				this.$confirm('确定禁用该条数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    row.state = 1
                    manage_update(row).then(res=>{
                        this.$notify({
                            title: '操作成功',
                            message: '禁用成功',
                            type: 'success'
                        });
                        this.init()
                    })
                });
			},
			start(index,row){
				this.$confirm('确定启用该条数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    row.state = 0
                    manage_update(row).then(res=>{
                        this.$notify({
                            title: '操作成功',
                            message: '启用成功',
                            type: 'success'
                        });
                        this.init()
                    })
                });
			},
            handleCurrentChange(val){
                this.currentPage = val
                this.init()
            },
            init(){
                manage_findByList({
                    page:this.currentPage,
                    manageName:this.searchName
                }).then((res)=>{
                    this.tableData = res.rows
					this.total = res.total
					var _this = this
					for (let i = 0; i < this.tableData.length; i++) {
                        if(this.tableData[i].state == 0){
                            _this.tableData[i].stateful = "启用" 
                        }else{
                            _this.tableData[i].stateful = "禁用"
                        }
                    }
                })
            },
          

            //搜索
            handleSearch(){
                this.currentPage = 1
                this.init()
            },
            //跳转编辑页面
            handleEdit(index,row){
                this.$router.push({
                    path: '/detectionMechanism/added',
                    query: { id: row.id }
                });
            },
      
            //删除
            handleDelete(index,row){
                this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // this.tableData.splice(row,1)
                    manage_delete(row.id).then((res)=>{
                        this.$notify({
                            title: '操作成功',
                            message: '删除成功',
                            type: 'success',
                            
                        });
                    this.init()
                    })
                    
                });
            },
           
        
        }
    }
</script>

<style scoped lang="less">
/deep/.upload-daoru{
    background: #eee;
    .el-upload{
        border: none;
        width: auto;
        height: auto;
        border-radius: 0;
        float: right;
        margin-right: 10px
    }
}
/* .el-row{ margin-bottom: 20px;} */
 .el-pagination{
    text-align: center;
} 
/* .el-select .el-input {
width: 130px;
} */
.input-with-select .el-input-group__prepend {
background-color: #fff;
}
.el-input--small .el-input__inner{
    border-radius: 5px 0 0 5px !important;
    /* border-right: none; */
}
.el-col{
    margin-bottom:0;
}
</style>